<template>
    <div class="best">
        <router-link :to="{ path: '/', query: { id: item.material_id } }" v-for="item in best">
            <img  :src="item.img">
        </router-link>

    </div>
</template>


<script>
import { best } from '../api/index'
export default {
    data() {
        return {
            best: []
        }
    },
    methods: {
        async getBest() {
            await best()
                .then(
                    content => {
                        let { code, data: { data: { sections } } } = content
                        let result = sections[1].body.items
                        let result2 = sections[2].body.items
                        if (code === 0) {
                            let newArr = result.map(item => {
                                let obj = {};
                                obj.img = item.img_url;
                                obj.id = item.material_id;
                                obj.w = item.w;
                                obj.h = item.h;
                                return obj;
                            })
                            let newArr2 = result2.map(item => {
                                let obj = {};
                                obj.img = item.img_url;
                                obj.id = item.material_id;
                                obj.w = item.w;
                                obj.h = item.h;
                                return obj;
                            })
                            this.best = newArr
                            this.best = this.best.concat(newArr2)

                        }
                    }
                )
                .catch(
                    (error) => {
                        console.log('请求失败', error)
                    }
                )
        }
    },
    created() {
        this.getBest()
    }
}
</script>

<style scoped lang="less"> 
    .best {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        flex-wrap: 1;
        flex-shrink: 0;

        a{
            width: 20%;
            img{
                width: 100%;
            }
        }
    }
</style>